<template>
    <!-- 房间列表显示 -->
    <el-row :gutter="24">
        <el-col :span="4" :offset="0">
            <h3 align="center"><b>房型筛选</b></h3>
            <br>
            <el-select v-model="seachData.rtid" clearable placeholder="请选择" value="-1" @change="handleRegionChange"
                size="500px">
                <el-option label="全部房型" value="-1" />
                <el-option v-for="item in roomTypeData" :key="item.Rtid" :label="item.Rtname" :value="item.Rtid" />
            </el-select>
            <br>
            <br>
            <h3 align="center"><b>房态筛选</b></h3>
            <!-- "全部" 按钮 -->
            <div align="center">
                <el-button style="width: 110px; height: 40px; margin: 10px;" v-model="seachData.rsid" value="-1"
                    @click="handleRegionChange1()">
                    全部
                </el-button>
            </div>
            <!-- 循环渲染按钮 -->
            <div align="center" v-for="item in stateData" :key="item.Rsid" :label="item.RoomType" :value="item.Rsid">
                <el-button style="width: 110px; height: 40px; margin: 10px;" @click="handleRegionChange1(item.Rsid)">
                    {{ item.RoomType }}
                </el-button>
            </div>
            <br>

            <h3 align="center"><b>更多筛选</b></h3>
            <!-- "全部" 按钮 -->
            <!-- 循环渲染按钮 -->
            <div align="center">
                <el-button style="width: 110px; height: 40px; margin: 10px;" v-model="seachData.msid" value="-1"
                    @click="handleRegionChange2()">
                    不限
                </el-button>
                <el-button v-for="item in MoreData" :key="item.MsId" :label="item.ScreenType" :value="item.MsId"
                    style="width: 110px; height: 40px; margin: 10px;" @click="handleRegionChange2(item.MsId)">
                    {{ item.ScreenType }}
                </el-button>
            </div>
        </el-col>
        <el-col :span="20" :offset="0">
            <el-row :gutter="20">
                <el-col :span="6" :offset="0" content="Bottom center" v-for="(item, index) in roomData"
                    :key="item.index">
                    <h1><b>{{ item.Rtname }}</b></h1><br>
                    <el-card :key="item.RoomNumDtos">
                        <span>{{ item.RoomNumDtos[0].RoomNumber }}</span>
                        <p align="right">
                            <el-popover placement="top-start" :width="80" trigger="hover">
                                <template #reference>
                                    <el-icon size="30">
                                        <More />
                                    </el-icon>
                                </template>
                                <p align="center">
                                    <el-link :underline="false" @click="CheckTrue()">办理入住</el-link><br><br>
                                    <el-link :underline="false" @click="CheckTrue()">办理预定</el-link><br><br>
                                    <el-link :underline="false"
                                        @click="GetRoomState(scope.row.RoomId, scope.row.MsId)">设为净房</el-link><br><br>
                                </p>
                            </el-popover>
                        </p>
                        <el-popover placement="top-start" :width="300" trigger="click">
                            <p>姓名：{{ item.RoomNumDtos[0].truename }}</p><br>
                            <p>手机号：{{ item.RoomNumDtos[0].Phone }}</p><br>
                            <p>住宿时间：{{ item.RoomNumDtos[0].CheckTime }}至{{ item.RoomNumDtos[0].DepartureTime }}</p>
                            <el-divider />
                            <p>晚数：{{ item.RoomNumDtos[0].NumBerday }}晚</p><br>
                            <template #reference>
                                <p>{{ item.RoomNumDtos[0].truename
                                    }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.RoomNumDtos[0].Phone
                                    }}</p>
                            </template>
                        </el-popover>

                    </el-card>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
//引入axios
import axios from 'axios';

//默认地址
axios.defaults.baseURL = 'http://localhost:5199/api/';

import { reactive, ref, onMounted } from 'vue'

const roomTypeData = ref([]);//房型类型列表

import { ElMessage, ElMessageBox } from 'element-plus'

const stateData = ref([
]);//房态类型列表

const MoreData = ref([]);//更多筛选列表

const roomData = ref([]);//房间列表

const roomCountData = ref([]);//房间数量列表

import router from '@/router';

const seachData = reactive({
    rtid: "",
    rsid: "",
    msid: ""
})

//房型列表
const GetRoomTypeList = () => {
    axios.get(`RoomState/GetRoomTypeList`).then(res => {
        roomTypeData.value = res.data.Data;
    })
}

//房态筛选列表
const GetStateList = () => {
    axios.get(`RoomState/GetRoomStateList`).then(res => {
        stateData.value = res.data.Data;
    })
}

//更多筛选列表
const GetMoreList = () => {
    axios.get(`RoomState/GetMoreScreenList`).then(res => {
        MoreData.value = res.data.Data;
    })
}

//入住列表显示
const GetRoomList = () => {
    axios.get(`RoomState/GetRoomShowList`, {
        params: {
            rtid: seachData.rtid || -1,
            rsid: seachData.rsid || -1,
            msid: seachData.msid || -1
        }
    }).then(res => {
        roomData.value = res.data.Data;
    })
}

const GetRoomCount = () => {
    axios.get(`RoomState/GetRoomCountList`).then(res => {
        roomCountData.value = res.data;
    })
}

const GetRoomState = (RoomId: number, MsId: number) => {
    axios.post(`RoomState/UpdState?roomid=${RoomId}&Msid=${MsId}`).then(res => {
        if (res.data.Code == 200) {
            ElMessage.success("转换成功");
            GetRoomList();
        }
        else {
            ElMessage.success("转换失败");
        }
    })
}


const handleRegionChange1 = (value) => {
    seachData.rsid = value;
    GetRoomList();
}

const handleRegionChange2 = (value) => {
    seachData.msid = value;
    GetRoomList();
}

const handleRegionChange = () => {
    GetRoomList();
}


const CheckTrue = () => {
    router.push({ path: '/index/subIndex/AddClientcu' })
}

//勾子函数
onMounted(() => {
    GetRoomTypeList();
    GetStateList();
    GetMoreList();
    GetRoomList();
    GetRoomCount();
})
</script>
<style>
.box-card {
    width: 100%;
    margin-bottom: 20px;
}

.card-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.active {
    background-color: #409eff;
    color: #fff;
}
</style>